import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Item {

    Flow {

        anchors.fill: parent
        spacing: 10
        padding: 10

        Rectangle {

            width: 280
            height: 280

            Text {
                text: "Colorize（着色）"
                font.bold: true
                font.pointSize: 15
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Image {
                id: butterfly
                source: "qrc:/images/butterfly.png"
                sourceSize: Qt.size(parent.width, parent.width)
                smooth: true
                visible: false
            }

            Colorize {
                id: butterflyColorize
                anchors.fill: butterfly
                source: butterfly
                hue: 0
                saturation: 0
                lightness: 0
            }

            Grid {
                rows: 3
                columns: 2
                topPadding: 15
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter

                Text { text: "hue:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0

                    onValueChanged: {
                        console.log("hue: " + value)
                        butterflyColorize.hue = value
                    }
                }

                Text { text: "saturation:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0

                    onValueChanged: {
                        console.log("saturation: " + value)
                        butterflyColorize.saturation = value
                    }
                }

                Text { text: "lightness:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0

                    onValueChanged: {
                        console.log("lightness: " + value)
                        butterflyColorize.lightness = value
                    }
                }
            }
        }


        Rectangle {

            width: 280
            height: 280

            Text {
                text: "HueSaturation（色相饱和度）"
                font.bold: true
                font.pointSize: 15
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Image {
                id: butterfly2
                source: "qrc:/images/butterfly.png"
                sourceSize: Qt.size(parent.width, parent.width)
                smooth: true
                visible: false
            }

            HueSaturation {
                id: hueSaturation
                anchors.fill: butterfly2
                source: butterfly2
                hue: 0
                saturation: 0
                lightness: 0
            }

            Grid {
                rows: 3
                columns: 2
                padding: 10
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter

                Text { text: "hue:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0

                    onValueChanged: {
                        console.log("hue: " + value)
                        hueSaturation.hue = value
                    }
                }

                Text { text: "saturation:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0

                    onValueChanged: {
                        console.log("saturation: " + value)
                        hueSaturation.saturation = value
                    }
                }

                Text { text: "lightness:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0

                    onValueChanged: {
                        console.log("lightness: " + value)
                        hueSaturation.lightness = value
                    }
                }
            }
        }

        Rectangle {
            width: 280
            height: 280

            Text {
                text: "ColorOverlay（颜色叠加）"
                font.bold: true
                font.pointSize: 15
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Image {
                id: butterfly3
                source: "qrc:/images/butterfly.png"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            ColorOverlay {
                id: id_colorOverlay
                anchors.fill: butterfly3
                source: butterfly3
                color: "#80800000"
            }

            Row {
                padding: 10
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                Text { text: "color: " }
                TextField {
                    text: "#80800000"
                    onTextEdited: id_colorOverlay.color = text
                }
            }
        }

        //去饱和
        Rectangle {
            width: 280
            height: 280

            Text {
                text: "Desaturate（去饱和）"
                font.bold: true
                font.pointSize: 15
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Image {
                id: butterfly4
                source: "qrc:/images/butterfly.png"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            Desaturate {
                id: id_desaturation
                anchors.fill: butterfly4
                source: butterfly4
                desaturation: 0.8
            }

            Row {
                padding: 10
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                Text { text: "desaturation:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0.8

                    onValueChanged: {
                        console.log("desaturation: " + value)
                        id_desaturation.desaturation = value
                    }
                }
            }
        }
    }
}
